<template>
  <div class="player" v-if="playList.length > 0">
    <transition name="enter">
      <div class="normal-player" v-show="fullScreen">
        <div class="player-background">
          <img width="100%" height="100%" :src="currentSong.picUrl">
        </div>
        <div class="player-wrapper">
          <m-header :notice='currentSong.name' color='white'>
            <div slot="left" @click="setFullScreen(false)">
              <i class="iconfont icon-xiangzuo" />
            </div>
          </m-header>
          <div class="player-middle" @click="changeMiddle">
            <div class="player-middle__l" ref="middleL" :style="middleL">
              <Player-cover ref="playerover" @change="onCoverChagne"/>
            </div>
            <div class="player-middle__r" ref="middleR" :style="middleR">
              <player-lyric :currentTime='currentTime' ref="lyric">
                <div class="player-volume">
                  <div class="player-volume__icon">
                    <i class="iconfont icon-yinliang"/>
                  </div>
                  <div class="player-volume__progress">
                    <progress-cmp :percentage='volume' immediate @change="onVolumeChange" />
                  </div>
                </div>
              </player-lyric>
            </div>
          </div>
          <div class="player-bottom">
            <div class="player-more">
              <div><i class="iconfont icon-love-b"/></div>
              <div><i class="iconfont icon-xiazai"/></div>
              <div><i class="iconfont icon-pinglun pinglun"/></div>
            </div>
            <div class="player-track">
              <span class="player-tiem">{{ format(currentTime) }}</span>
              <progress-cmp :percentage='percentage' class="progress" @change="onpProgressChange" />
              <span class="player-tiem">{{ format(currentSong.dt) }}</span>
            </div>
            <div class="player-operators">
              <i class="iconfont" @click="changePalyMode" :class="iconMode"/>
              <i class="iconfont icon-shangyishoushangyige" @click="prve" :class="disableCls"/>
              <i class="iconfont paly-btn" @click="changePalyingState" :class="iconPlay" />
              <i class="iconfont icon-xiayigexiayishou" @click="next" :class="disableCls"/>
              <i class="iconfont icon-gengduo" @click.stop='showPop = true'/>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <transition name="enter">
      <div class="mini-player border-1px-top" v-show="!fullScreen" @click="setFullScreen(true)">
        <div class="mini-player__l">
          <img class="mini-player__pic" :src="currentSong.picUrl" />
        </div>
        <div class="mini-player__m">
          <div class="mini-player__info">
            <span class="name">
              {{ currentSong.name }}
            </span>
            <span class="artists">
              {{ currentSong.singers }}
            </span>
          </div>
          <div class="mini-player__progress" v-ripple @click.stop="changePalyingState">
            <progress-cmp type="circle" :percentage='percentage' class="progress">
              <i class="iconfont" :class="miniIconPlay"/>
            </progress-cmp>
          </div>
        </div>
        <div class="mini-player__r" v-ripple @click.stop='showPop = true'>
          <i class="iconfont icon-gengduo"/>
        </div>
      </div>
    </transition>
    <player-list v-model="showPop" />
    <audio id="audio" ref="audio" :src="currentSong.url" @play="ready" @error="error" @timeupdate="updateTime" @ended="end" />
  </div>
</template>
<script>
import MHeader from 'base/m-header'
import ProgressCmp from 'base/progress'
import PlayerCover from './player-cover'
import PlayerLyric from './player-lyric'
import PlayerList from './player-list'
import playMode from '@/config/playMode'
import { mapGetters, mapMutations } from 'vuex'
import { shuffle } from '@/utils'
import playerMixin from './player-mixin'

export default {
  components: {
    MHeader,
    ProgressCmp,
    PlayerCover,
    PlayerLyric,
    PlayerList
  },
  mixins: [playerMixin],
  computed: {
    iconPlay() {
      let cls = this.playing ? 'icon-pause' : 'icon-bofang1'
      return `${cls} ${this.disableCls}`
    },
    disableCls() {
      return this.songReady ? '' : 'disable'
    },
    miniIconPlay() {
      return this.playing ? 'icon-zanting' : 'icon-icon--'
    },
    percentage() {
      return this.currentTime / this.currentSong.dt
    },
    middleL() {
      return {
        opacity: this.showCover ? 1 : 0
      }
    },
    middleR() {
      return {
        transform: `translate3d(${this.showCover ? 0 : -window.screen.width}px, 0, 0)`
      }
    }
  },
  mounted() {
    this.$toast.setDefaultOptions({ position: 'bottom' })
  },
  data() {
    return {
      currentTime: 0,
      volume: 100,
      songReady: false,
      showCover: true,
      showPop: false
    }
  },
  methods: {
    changePalyingState() {
      if (!this.songReady) return
      this.setPalyingState(!this.playing)
      this.$refs.lyric.togglePlay()
    },
    onCoverChagne() {
      this.songReady = false
      setTimeout(() => {
        this.setPalyingState(true)
      }, 300)
    },
    onpProgressChange(percentage) {
      let currentTime = percentage * this.currentSong.dt
      this.$refs.audio.currentTime = currentTime
      this.$refs.lyric.seek(currentTime * 1000)
      if (!this.playing) {
        this.changePalyingState()
      }
    },
    ready() {
      this.songReady = true
      this.$refs.playerover.playStart()
    },
    error() {
      this.songReady = true
    },
    updateTime(e) {
      this.currentTime = e.target.currentTime
    },
    end() {
      if (this.mode === playMode.loop) {
        this.$refs.audio.currentTime = 0
        setTimeout(() => {
          this.$refs.audio.play()
        }, 300)
      } else {
        this.next()
      }
    },
    prve() {
      if (!this.songReady) return
      this.$refs.playerover.prve()
      this.songReady = false
    },
    next() {
      if (!this.songReady) return
      this.$refs.playerover.next()
      this.songReady = false
    },
    format(interval) {
      interval = interval | 0
      const minute = interval / 60 | 0
      const second = this._pad(interval % 60)
      return `${minute}:${second}`
    },
    _pad(num, n = 2) {
      let len = num.toString().length
      while (len < n) {
        num = '0' + num
        len++
      }
      return num
    },
    onVolumeChange(percentage) {
      let volume = 1 * percentage
      this.$refs.audio.volume = volume
    },
    changeMiddle() {
      this.showCover = !this.showCover
      if (!this.showCover) {
        this.$refs.lyric.refresh()
      }
    },
    ...mapMutations('player', {
      setFullScreen: 'SET_FULL_SCREEN'
    })
  },
  watch: {
    currentSong(newSong, oldSong) {
      if (!newSong) {
        return
      }
      if (oldSong && newSong.id === oldSong.id) {
        return
      }
      setTimeout(() => {
        this.$refs.audio.play()
      }, 1000)
    },
    playing(newPlaying) {
      this.$nextTick(() => {
        const audio = this.$refs.audio
        if (audio) {
          newPlaying ? audio.play() : audio.pause()
        }
      })
    },
    
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/variable.less';
@import '~@/style/mixins.less';
.player{
  .normal-player{
    background: #222 !important;
    .route-page();
    z-index: 9;
    .player-background{
      background: #222;
      width: 100%;
      height: 100%;
      filter: blur(20px);
      opacity: .6;
    }
    .player-wrapper{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      .player-middle{
        flex: 1;
        height: 0;
        overflow: hidden;
        white-space: nowrap;
        .player-middle__l,.player-middle__r{
          vertical-align: top;
          position: relative;
          display: inline-block;
          width: 100%;
          height: 100%;
          transition: opacity .5s;
        }
        .player-volume{
          display: flex;
          height: 30px;
          .player-volume__icon{
            color: white;
            width: 50px;
            height: 100%;
            text-align: center;
            line-height: 30px;
          }
          .player-volume__progress{
            display: flex;
            align-items: center;
            flex: auto;
            width: 0;
            margin-right: 20px;
          }
        }
      }
      .player-bottom{
        height: 100px;
        display: flex;
        flex-direction: column;
        color: white;
        .player-track{
          height: 30px;
          display: flex;
          align-items: center;
          .player-tiem{
            width: 50px;
            text-align: center;
          }
          .progress{
            width: 0;
            flex: auto;
          }
        }
        .player-more, .player-operators{
          display: flex;
          align-items: center;
          text-align: center;
          font-size: @font-size-large;
          >i{
            flex: 1;
            font-size: 1em;
          }
          .paly-btn{
            font-size: 35px;
          }
          .disable{
            color: #32323366;
          }
        }
        i:active{
          text-shadow: 0 0 10px #fff,
                      0 0 20px  #fff,
                      0 0 30px  #fff
        }
        .player-more {
          >div{
            flex: 1;
            font-size: 1em;
            // .pinglun{
            //   position: relative;
            // }
            // .pinglun::after{
            //   content: attr(data-beforeContent);
            //   position: absolute;
            //   right: 0;
            //   top: 0;
            //   transform: translateX(70%) translateY(-100%);
            //   font-size: 8px;
            // }
          }
        }
      }
    }
  }
  .normal-player--ready{
    color: gray;
  }
  .mini-player{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    height: 50px;
    background-color: white;
    z-index: 9;
    .mini-player__l,.mini-player__r{
      position: relative;
      width: 40px;
      height: 100%;
      text-align: center;
      line-height: 50px;
      font-size: @font-size-normal;
      .mini-player__pic{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      >i{
        font-size: 1.3em;
      }
    }
    .mini-player__l{
      width: 60px;
    }
    .mini-player__m{
      flex: auto;
      width: 0;
      display: flex;
      .mini-player__info{
        flex: auto;
        width: 0;
        display: flex;
        flex-direction: column;
        padding-right: 10px;
        .name,.artists{
          flex: 1;
          line-height: 25px;
          .ellipsis()
        }
        .name{
          font-size: @font-size-normal;
        }
        .artists{
          color: @text-color-light;
          font-size: @font-size-small;
        }
      }
      .mini-player__progress{
        position: relative;
        width: 50px;
        height: 100%;
        border-radius: 50%;
        .progress{
          height: 100%;
          font-size: @font-size-small;
          i{
            font-size: 1em;
          }
        }
        margin: auto;
      }
    }
  }
}
</style>